<template>
  <div>
    <van-nav-bar
      title="列表"
      fixed
      left-arrow
      @click-left="$router.back()"
    ></van-nav-bar>
    <van-tabs v-model="active" animated @click="sortListFn">
      <van-tab v-for="item in list" :key="item.id" :title="item.catename">
        <Acticle></Acticle>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { homeIndex } from '@/api/register'
import Acticle from './acticle.vue'
export default {
  components: {
    Acticle
  },
  data() {
    return {
      list: [],
      active: 0
    }
  },
  async created() {
    const res = await homeIndex(this.token)
    this.list = res.data.data.allCate
    // active赋值数字
    this.active = +this.$route.query.index
  },

  methods: {
    sortListFn() {
      this.$router.replace({
        path: '/sort/list',
        query: {
          id: this.list[this.active].id,
          index: this.active
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.van-tabs {
  margin-top: 50px;
}
</style>
